<template>
	<view>
		<u-form :model="form" ref="uForm" class="u-m-l-30 u-m-r-30">
			<u-form-item label="昵称" prop="name"><u-input v-model="form.name" /></u-form-item>
			<!-- 			<u-form-item label="邮箱" prop="email"><u-input v-model="email" /></u-form-item>
			<u-form-item label="密码" prop="password"><u-input v-model="password" /></u-form-item> -->
		</u-form>
		<u-button :style="[infoStyle]" class="u-m-t-60 u-m-l-60 u-m-r-60" @click="editSubmit">提交</u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				name: ''
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入昵称',
						trigger: 'blur'
					},
					{
						//自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: 'blur'
					}
				]
			}
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	computed: {
		infoStyle() {
			let style = {};
			if (this.name) {
				style.color = '#fff';
				style.backgroundColor = this.$u.color['warning'];
			}
			return style;
		}
	},
	methods: {
		editSubmit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
			// if (!this.$u.test.email(this.email)) {
			// 	return this.$u.toast('请输入正确的邮箱');
			// }

			//发起修改请求
		}
	}
};
</script>

<style></style>
